{% extends 'core/_base.html' %}
{% block title %} Due Collection {% endblock title %}
{% load humanize %}
{% block body %}
<div class="container-fluid">
    <!-- Due Collection Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Due Collection</h6>
        </div>
        {% if due_list %}
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <div class="text-right text-black m-2">
                            Total: <span class="text-red-600"> {{ total_amount | intcomma }}<small class="text-black">TK</small></span> 
                            <br>
                            Total Due: <span class="text-red-600"> {{ due_amount | intcomma }}<small class="text-black">TK</small></span> 
                        </div>
                        <tr>
                            <th class="text-center">SL.</th>
                            <th class="text-center">Invoice No</th>
                            <th class="text-center">Customer Name</th>
                            <th class="text-center">Mobile No.</th>
                            <th class="text-center">Date</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Due Amount</th>
                            <th class="text-center">Total Amount</th>
                        </tr>
                    </thead>
                    {% for sale in due_list %}
                    <tbody>
                        <tr>
                            <td>{{ forloop.counter }}</td>
                            <td class="text-center text-green-500 font-bold">#{{ sale.invoice_number }}</td>
                            <td class="text-center">{{ sale.customer }}</td>
                            <td class="text-center">{{ sale.customer.mobile_no }}</td>
                            <td class="text-center">{{ sale.date }}</td>
                            {% if sale.is_paid == True %}
                            <td class="text-center"><span class="text-xs inline-block py-2 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-green-400 text-white rounded-full">{{ sale.status|title }}</span></td>
                            {% else %}
                            <td class="text-center"><span class="text-xs inline-block py-2 px-2.5 leading-none text-center whitespace-nowrap align-baseline font-bold bg-red-400 text-white rounded-full">{{ sale.status|title }}</span></td>
                            {% endif %}
                            <td class="text-center text-green-700">
                                {{ sale.due | intcomma }} <small class="text-black">BDT</small>
                            </td> 
                            <td class="text-center text-green-700">
                                {{ sale.total | intcomma }} <small class="text-black">BDT</small>
                            </td>
                        </tr>
                    </tbody>
                    <!-- sales delete modal start -->
                    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                    aria-hidden="true">
                        <div class="modal-dialog" role="document">
                        <form action="{% url 'delete_sale' sale.pk %}" method="post">
                            <!-- Security token -->
                            {% csrf_token %}
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">
                                        Are you sure you want to delete this? 
                                        <br>This action cannot be undone.</h5>
                                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>
                                </div>
                                <div class="modal-footer">
                                    <input class="text-white hover:no-underline py-1 px-3 text-white rounded-lg bg-red-500 block md:inline-block" type="submit" value="Yes">
                                </div>
                            </div>
                        </form>
                        </div>
                    </div>
                    <!-- sales delete modal end -->
                    {% endfor %}
                </table>
            </div>
            <!--- Pagination Start -->
            <div class="flex items-center justify-center lg:px-0 sm:px-6">
                <div class="lg:w-3/5 w-full  flex items-center justify-between border-t border-gray-200">
                    <div class="flex items-center pt-3 text-gray-600 hover:text-indigo-700 cursor-pointer">
                        <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.1665 4H12.8332" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M1.1665 4L4.49984 7.33333" stroke="currentColor" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M1.1665 4.00002L4.49984 0.666687" stroke="currentColor" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        {% if due_list.has_previous %}
                        <a class="text-sm ml-3 font-medium leading-none " href="?page={{ sales.previous_page_number }}">Previous</a>
                      {% endif %}
                    </div>
                    <div class="sm:flex hidden">
                    {% for i in due_list.paginator.page_range %}
                        {% if due_list.number == i %}
                            <a class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2" href="#">{{ i }} </a>
                        
                        {% else %}
                            <a class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2" href="?page={{ i }}">{{ i }}</a>
                        {% endif %}
                    {% endfor %}
                    </div>
                    <div class="flex items-center pt-3 text-gray-600 hover:text-indigo-700 cursor-pointer">
                        {% if due_list.has_next %}
                        <a class="text-sm font-medium leading-none mr-3" href="?page={{ sales.next_page_number }}">Next</a>
                      {% endif %}
                        <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.1665 4H12.8332" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M9.5 7.33333L12.8333 4" stroke="currentColor" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M9.5 0.666687L12.8333 4.00002" stroke="currentColor" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </div>
                </div>
            </div>
            <p class="text-base">Showing {{ due_list.number }}/{{ due_list.paginator.num_pages }}</p>
            <!--- Pagination End -->
        </div>
        {% else %}
        {% include 'core/info/message.html' %}
        {% endif %}
    </div>
    <!-- Due Collection Table -->
</div>
{% endblock body %}